<template>
  <div>
    <form>
      <label for="username">用户名</label>
      <input type="text" id="username" v-model="searchForm.username" placeholder="用户名">
      <label for="nickname">昵称</label>
      <input type="text" id="nickname" v-model="searchForm.nickname" placeholder="昵称">
      <label for="status">状态</label>
      <select id="status" v-model="searchForm.status">
        <option value="">[请选择]</option>
        <option value="1">可用</option>
        <option value="2">禁用</option>
      </select>
      <button type="button" @click="getUserList">查询</button>
      <button type="button" @click="clearForm">清空</button>
    </form>
    <button type="button" @click="$router.push('user/edit')">添加</button>
    <table width="70%" border="1">
      <tr>
        <th>编号</th>
        <th>用户名</th>
        <th>昵称</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      <tr v-for="user in userList" :key="user.id">
        <td>{{user.id}}</td>
        <td>{{user.username}}</td>
        <td>{{user.nickname}}</td>
        <td>
          <span v-if="user.status === 1">可用</span>
          <span v-else>禁用</span>
        </td>
        <td>
          <button type="button" @click="$router.push(`user/edit?id=${user.id}`)">修改</button>
          <button type="button" @click="delInfo(user.id)">删除</button>
        </td>
      </tr>
    </table>
    <div>
      <button type="button" :disabled="searchForm.page===1" @click="toPage(searchForm.page-1)">上一页</button>
      <button type="button" style="margin: 5px" v-for="page in pages" :key="page" :class="{'page-active':searchForm.page === page}" @click="toPage(page)">{{page}}</button>
      <button type="button" :disabled="searchForm.page===pages" @click="toPage(searchForm.page+1)">下一页</button>
      <select v-model="searchForm.limit">
        <option :value="5">每页5条</option>
        <option :value="10">每页10条</option>
        <option :value="20">每页20条</option>
        <option :value="50">每页50条</option>
        <option :value="100">每页100条</option>
      </select>
      <span>当前第{{searchForm.page}}页,共{{pages}}页,总条数：{{count}}条</span>
    </div>
  </div>
</template>

<script>
const initData = {
  username: '',
  nickname: '',
  status: '',
  page: 1,
  limit: 5
}
export default {
  name: 'UserList',
  data () {
    return {
      userList: [],
      searchForm: { ...initData },
      count: 0
    }
  },
  computed: {
    pages () {
      return this.count % this.searchForm.limit === 0 ? Math.floor(this.count / this.searchForm.limit) : Math.floor(this.count / this.searchForm.limit) + 1
    }
  },
  watch: {
    'searchForm.limit': function () {
      this.getUserList()
    }
  },
  methods: {
    getUserList () {
      this.$http.get('user/page', this.searchForm).then(data => {
        this.userList = [...data.data]
        this.count = data.count
      })
    },
    toPage (page) {
      this.searchForm.page = page
      this.getUserList()
    },
    clearForm () {
      this.searchForm = { ...initData }
      this.getUserList()
    },
    delInfo (id) {
      if (confirm(`确定删除编号为[${id}]的数据吗？`)) {
        this.$http.delete(`user/delete/${id}`).then(() => {
          alert('删除成功！')
          this.getUserList()
        })
      }
    }
  },
  created () {
    this.getUserList()
  }
}
</script>

<style scoped>
button.page-active{
  background-color: pink;
  color: white;
}
</style>
